<template>
  <div class="order-detail">
    <h2>订单详情 此订单号: {{ orderId }}</h2>

<!--    &lt;!&ndash; 加载状态 &ndash;&gt;-->
<!--    <el-skeleton v-if="loading" :rows="6" animated />-->

<!--    &lt;!&ndash; 订单信息卡片 &ndash;&gt;-->
    <el-card >
<!--      <el-descriptions :column="2" border>-->
<!--        <el-descriptions-item label="订单号">{{ order.orderSn  }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="总金额">{{ order.totalAmount  }}元</el-descriptions-item>-->
<!--        <el-descriptions-item label="支付方式">{{ paymentMethods[order.paymentMethod] }}</el-descriptions-item>-->
<!--        <el-descriptions-item label="创建时间">{{ formatTime(order.createdAt)  }}</el-descriptions-item>-->
<!--      </el-descriptions>-->

      <!-- 商品列表 -->
      <el-table :data="localOrderItems"  style="margin-top: 20px " :stripe="true">
        <el-table-column prop="itemId" label="订单项ID" />
        <el-table-column prop="orderId" label="订单ID"  />
        <el-table-column prop="productName" label="商品名称"  />
        <el-table-column prop="productImage" label="商品图片"  />
        <el-table-column prop="productPrice" label="商品价格"  />
        <el-table-column prop="productQuantity" label="商品数量"  />
        <el-table-column prop="productTotalPrice" label="商品总价"  />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleBack(scope.row.orderId)">返回</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row.itemId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import axios from 'axios';
export default {

  name: 'OrderItemView',
  props: ['orderId'], // 接收路由参数

  // loading: true
  data() {
    return {
     localOrderItems: [],
      paymentMethods: {
        1: '微信支付',
        2: '支付宝',
        3: '银行卡'
      }
    }
  },
  created() {
    this.fetchOrderDetail();
  },
  methods: {

    // 获取订单详情
    async fetchOrderDetail() {
        console.log(this.orderId);
         axios.get(`/api/orderItem/check/${this.orderId}`).then(res => {
          this.localOrderItems  = res.data;
          console.log("订单详情：",this.localOrderItems)
      })
    },
    // 时间格式化
    formatTime(timestamp) {
      return new Date(timestamp).toLocaleString();
    },
    // 返回
    handleBack() {
      this.$router.push({
        name: 'OrderUserView',
        params: {
          orderId: this.orderId
      }
    })
    },
    // 删除订单项
    handleDelete(itemId) {
      console.log(itemId);
      console.log("handleDelete");
      axios.delete(`/api/orderItem/${itemId}`).then(res => {
        console.log(res.data);
        if (res.status === 200 && res.data === "success") {
          this.$message.success("删除成功");
          // 重新获取订单项详情
          this.fetchOrderDetail();
        }
    })
    }
  },
  // mounted() {
  //   this.
  // }
}

</script>

<style scoped>
.order-detail {
  padding: 20px;
}
</style>